<template>
  <div class="process-design">
    <bpmn-process-designer-app
      :style="'display: flex; height:' + height"
      v-model="xmlString"
      v-bind="controlForm"
      keyboard
      ref="processDesignerApp"
      :events="[
          'element.click',
          'connection.added',
          'connection.removed',
          'connection.changed'
        ]"
      @element-click="elementClick"
      @init-finished="initModeler"
      @event="handlerEvent"
      @save="onSaveProcess"
      @childShowType="childShowType"
    />
    <bmpn-process-penal-app :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel"
                            v-show="showType === 1"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import '@/plugins/package/theme/index.scss'
import { BpmnProcessDesignerApp, BmpnProcessPenalApp } from '@/plugins/package/indexApp'
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from '@/plugins/package/designer/plugins/content-pad'
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from '@/plugins/package/designer/plugins/palette'
import NyanPaletteProvider from '../../plugins/package/designer/plugins/palette/svg0/palette'

import { vuePlugin } from '@/plugins/package/highlight'
import 'highlight.js/styles/atom-one-dark-reasonable.css'
import { addModel, getProcessInfo2 } from '@/api/workflow/model'

Vue.use(vuePlugin)

export default {
  name: 'ProcessDesignerApp',
  components: {
    BpmnProcessDesignerApp,
    BmpnProcessPenalApp
  },
  watch: {
    //监听路由地址的改变
    $route: {
      immediate: true,
      handler() {
      }
    }
  },
  data() {
    return {
      parentId: this.$route.params.parentId,
      designerForm: {
        loading: false,
        bpmnXml: null,
        modelId: null,
        form: {
          processName: null,
          processKey: null
        },
        processNo: '',
        processName: '',
        processVersion: '',
        businessTypeId: '',
        businessTypeName: '',
        hostDeptId: '',
        hostDeptName: '',
        responsibilityDeptValue: '',
        grassrootsDeptValue: '',
        transverseDeptValue: '',
        description: '',
        processAuditType: ''
      },
      showType: 0,
      height: document.documentElement.clientHeight / 2 + 'px;',
      xmlString: '',
      modeler: null,
      controlForm: {
        processId: '',
        processName: '',
        simulation: false,
        labelEditing: false,
        labelVisible: false,
        prefix: 'flowable',
        headerButtonSize: 'small',
        additionalModel: [CustomContentPadProvider, CustomPaletteProvider, NyanPaletteProvider]
      },
      dataFrom: {
        processName: '',
        businessTypeId: undefined,
        hostDeptId: '',
        hostDeptName: '',
        responsibilityDeptValue: '',
        grassrootsDeptValue: '',
        transverseDeptValue: '',
        description: '',
        xml: '',
        processAuditType: ''
      }
    }
  },
  created() {
    this.getProcessInfo()
    console.log('id', this.$route.params.id)
    console.log('type', this.$route.params.type)
    console.log('parentId', this.$route.params.parentId)
  },
  methods: {
    //子页面 回传参数状态
    childShowType(data) {
      this.showType = data
    },
    elementClick(element) {
      this.element = element
    },
    initModeler(modeler) {
      setTimeout(() => {
        this.modeler = modeler
      }, 10)
    },
    handlerEvent(eventName, element) {
    },
    // 查询流程信息
    getProcessInfo() {
      let id = this.$route.params.id
      if (id !== undefined && this.$route.params.id !== null && this.$route.params.id !== '') {
        getProcessInfo2(id).then(data => {
          console.log('data', data)
          this.controlForm = {
            processId: data.modelId,
            processName: data.processName,
            simulation: false,
            labelEditing: false,
            labelVisible: false,
            prefix: 'flowable',
            headerButtonSize: 'small',
            additionalModel: [CustomContentPadProvider, CustomPaletteProvider, NyanPaletteProvider]
          }
          this.dataFrom = data.data
          this.bpmnXml = data.data.bpmnXml
          this.xmlString = data.data.bpmnXml
        })
      }
    },
    // 最终保存的 或者提交的方法的 需要改造
    onSaveProcess(data) {
      let message = ''
      if (data.processAuditType === 0) {
        message = '是否保存当前流程'
      }
      if (data.processAuditType === 1) {
        message = '是否提交当前流程'
      }
      this.$confirm(message, {
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否'
      }).then(() => {
        // if (data.businessTypeIds !== null) {
        //   data.businessTypeIds = JSON.stringify(data.businessTypeIds)
        // }
        // if (data.hostDeptIds !== null) {
        //   data.hostDeptIds = JSON.stringify(data.hostDeptIds)
        // }
        this.confirmSave(data, false)
      }).catch(action => {
      })
    },
    confirmSave(body, newVersion) {
      console.log('confirmSave', body)
      addModel(Object.assign(body, {
        newVersion: newVersion,
        bpmnXml: body.xml,
        parentId: 0
      })).then(() => {
        this.$router.back()
      }).finally(() => {

      })
    }
  }
}
</script>

<style>
.djs-label tspan {
  /*fill: red !important;*/
}

.bpmn-icon-lane-insert-above,
.bpmn-icon-lane-divide-two,
.bpmn-icon-lane-divide-three,
  /*.bpmn-icon-text-annotation,*/
.djs-resizer-ne,
.djs-resizer-nw,
.djs-resizer-se,
.djs-resizer-sw,
.djs-resizer-e,
.djs-resizer-w {
  display: none !important;
}

.bpmn-icon-lane-insert-above,
.bpmn-icon-lane-divide-two,
.bpmn-icon-lane-divide-three,
.bpmn-icon-lane-insert-below {
  transform: rotate(-90deg);
}

.djs-shape .djs-visual polyline {
  /*stroke: none !important;*/
  transform: rotate(-90deg);
  /*stroke-width: 50px !important;*/
  /*display: none;*/
}

.djs-hit.djs-hit-all {
  /*transform: rotate(-90deg) !important;*/
}

.djs-direct-editing-parent {
  /*display: none;*/
  /*top: 0 !important;*/
}

.djs-direct-editing-parent, text {
  transform: rotate(0deg) !important;
  /*display: block !important;*/
  /*width: 500px !important;*/
}

/*.djs-overlay-container .djs-overlays:nth-child(n+2) .bpmn-icon-lane-insert-below {*/
.djs-overlay-container .djs-overlays .bpmn-icon-lane-insert-below {
  /*display: none;*/
}

.djs-drag-group .djs-dragger polyline {
  display: none;
}

.new-parent .djs-drag-group .djs-dragger polyline {
  display: block;
}

.new-parent .djs-dragger-rotate-sub-process-square {
  transform: rotate(90deg);
}

.new-parent .djs-dragger-rotate-sub-process-circle {
  transform: rotate(45deg);
}

.new-parent .djs-dragger-rotate-participant {
  transform: rotate(90deg);
}
</style>


<style lang="scss">
body {
  overflow: auto !important;
  margin: 0;
  box-sizing: border-box;
}

body,
body * {
  /* 滚动条 */
  &::-webkit-scrollbar-track-piece {
    background-color: #fff; /*滚动条的背景颜色*/
    -webkit-border-radius: 0; /*滚动条的圆角宽度*/
  }

  &::-webkit-scrollbar {
    width: 10px; /*滚动条的宽度*/
    height: 8px; /*滚动条的高度*/
  }

  &::-webkit-scrollbar-thumb:vertical {
    /*垂直滚动条的样式*/
    height: 50px;
    background-color: rgba(153, 153, 153, 0.5);
    -webkit-border-radius: 4px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条的hover样式*/
    background-color: rgba(159, 159, 159, 0.3);
    -webkit-border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:hover {
    /*滚动条的hover样式*/
    background-color: rgba(159, 159, 159, 0.5);
    -webkit-border-radius: 4px;
  }
}
</style>
